<template>
  <div class="flash_exchange_page">
    <CommonHeader title="闪兑" />
    <!-- 闪兑主体 -->
    <div class="exchange_content page_no_tab_bar">
      <ul class="exchange_list">
        <!-- 卡 1 -->
        <li>
          <div class="first">
            <span>消耗ETH</span>
            <span class="max">MAX</span>
          </div>
          <div class="second">
            <div class="menu">
              <img src="@/assets/assets/BTC_icon.png" alt="" />
              <div>
                <el-dropdown trigger="click">
                <div class="menu_title">
                  <span>ETH</span>
                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item> Action 2 </el-dropdown-item>
                    <el-dropdown-item>Action 4</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              </div>
            </div>
            <span>15,000.0</span>
          </div>
          <div class="third font_color">可用：1000 ETH</div>
        </li>
        <!-- 卡 2 -->
        <li>
          <div class="first">
            <span>消耗USDT</span>
            <span class="max">MAX</span>
          </div>
          <div class="second">
            <div class="menu">
              <img src="@/assets/assets/USDT_icon.png" alt="" />
              <div>
                <el-dropdown trigger="click">
                <div class="menu_title">
                  <span>ETH</span>
                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item> Action 2 </el-dropdown-item>
                    <el-dropdown-item>Action 4</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              </div>
            </div>
            <span>15,000.0</span>
          </div>
          <div class="third font_color">预估值：0.5USDT</div>
          <div class="forth">
            <img src="@/assets/assets/notice_icon.png" alt="" />
            <span>闪兑时销毁5%代币</span>
          </div>
        </li>
      </ul>
      <!-- 确定按钮 -->
      <div class="operate_btn">确定</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
</script>

<style lang="scss" scoped>
:deep(.el-dropdown) {
  line-height: 2;
}
.flash_exchange_page {
  .exchange_content {
    .exchange_list {
      & > li {
        background-color: #333c43;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 20px;
        & > div {
          margin-bottom: 15px;
        }
        & > div:last-child {
          margin-bottom: 0;
        }
        .first {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .max {
            padding: 1px 12px;
            border: 1px solid #16e65c;
            border-radius: 20px;
            color: #16e65c;
          }
        }
        .second {
          display: flex;
          justify-content: space-between;
          align-items: center;
          & > span:last-child {
            font-weight: 700;
            font-size: 20px;
          }
          .menu {
            background-color: #5f6262;
            border-radius: 20px;
            padding: 2px 15px;
            display: flex;
            align-items: center;
            .menu_title {
              color: #ffffff;
              display: flex;
              height: 100%;
              margin-left: 5px;
              align-items: center;
            }
          }
        }
        .third {
          font-size: 14px;
        }
        .forth {
          display: flex;
          align-items: center;
          span {
            margin-left: 10px;
          }
        }
      }
    }
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
